<template>
  <h1 class="row-title">界面至多显示10个页码 total 和 pageSize计算页码少于 10 个 显示全部页码</h1>
  <div class="row">
    <ct-pager
      :total="90"
      :page-size="10"
      :current-page="currentPage1"
      @currentChange="currentPage1 = $event"
    />
  </div>
  <h1 class="row-title">
    界面至多显示10个页码 total 和 pageSize计算页码超过 10 个 此时无法显示全部页码 会显示...
  </h1>
  <div class="row">
    <ct-pager
      :total="101"
      :page-size="10"
      :current-page="currentPage2"
      @currentChange="currentPage2 = $event"
    />
  </div>
  <h1 class="row-title">可调整主题颜色</h1>
  <div class="row">
    <ct-pager
      :total="300"
      :page-size="10"
      type="danger"
      :current-page="currentPage3"
      @currentChange="currentPage3 = $event"
    />
  </div>
  <div class="row">
    <ct-pager
      :total="300"
      :page-size="10"
      type="success"
      :current-page="currentPage4"
      @currentChange="currentPage4 = $event"
    />
  </div>
  <div class="row">
    <ct-pager
      :total="300"
      :page-size="10"
      type="warning"
      :current-page="currentPage5"
      @currentChange="currentPage5 = $event"
    />
  </div>
  <div class="row">
    <ct-pager
      :total="300"
      :page-size="10"
      type="info"
      :current-page="currentPage6"
      @currentChange="currentPage6 = $event"
    />
  </div>
  <div class="row">
    <ct-pager
      :total="300"
      :page-size="10"
      type="error"
      :current-page="currentPage7"
      @currentChange="currentPage7 = $event"
    />
  </div>
  <h1 class="row-title">可改变大小</h1>
  <div class="row">
    <ct-pager
      :total="333"
      :page-size="5"
      size="small"
      :current-page="currentPage8"
      @currentChange="currentPage8 = $event"
    />
  </div>
  <div class="row">
    <ct-pager
      :total="503"
      :page-size="40"
      size="large"
      :current-page="currentPage9"
      @currentChange="currentPage9 = $event"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue'
const currentPage1 = ref(1)
const currentPage2 = ref(1)
const currentPage3 = ref(1)
const currentPage4 = ref(1)
const currentPage5 = ref(1)
const currentPage6 = ref(1)
const currentPage7 = ref(1)
const currentPage8 = ref(1)
const currentPage9 = ref(1)
</script>
<style lang="scss" scoped></style>
